<template>
  <div class="container mt-4">
    <div class="mb-3">
      <el-button type="primary" @click="dialogVisible = true; dialogMode = 'add'; resetForm()">添加商品</el-button>
    </div>

    <el-table :data="goodsList" style="width: 100%" class="table table-striped">
      <el-table-column prop="name" label="商品名称"></el-table-column>
      <el-table-column prop="quantity" label="数量"></el-table-column>
      <el-table-column prop="price" label="单价"></el-table-column>
      <el-table-column label="操作" width="120">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="商品信息" :visible.sync="dialogVisible" @close="dialogVisible = false">
      <el-form :model="form" :rules="rules" ref="form" label-width="120px">
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="数量" prop="quantity">
          <el-input-number v-model="form.quantity" :min="1"></el-input-number>
        </el-form-item>
        <el-form-item label="单价" prop="price">
          <el-input-number v-model="form.price" controls-position="right"></el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('form')">提交</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goodsList: [
        { id: 1, name: '苹果', quantity: 10, price: 100 },
        { id: 2, name: '西瓜', quantity: 20, price: 10 },
        { id: 3, name: '梨', quantity: 30, price: 20 },
        { id: 4, name: '哈密瓜', quantity: 40, price: 40 },
        { id: 5, name: '葡萄', quantity: 50, price: 30 },
        // Other items
      ],
      dialogVisible: false,
      dialogMode: '',
      form: {
        id: null,
        name: '',
        quantity: 1,
        price: 0,
      },
      rules: {
        // Validation rules
      },
    };
  },
  methods: {
    resetForm() {
      this.form = {
        id: null,
        name: '',
        quantity: 1,
        price: 0,
      };
    },
    handleEdit(index, goods) {
      this.dialogVisible = true;
      this.dialogMode = 'edit';
      this.form = { ...goods };
    },
    handleDelete(index, goods) {
      this.goodsList.splice(index, 1);
    },
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (this.dialogMode === 'add') {
            const newId = this.goodsList.length > 0 ? Math.max(...this.goodsList.map(item => item.id)) + 1 : 1;
            this.form.id = newId;
            this.goodsList.push(this.form);
          } else if (this.dialogMode === 'edit') {
            const index = this.goodsList.findIndex(item => item.id === this.form.id);
            if (index !== -1) {
              this.goodsList.splice(index, 1, this.form);
            }
          }
          this.dialogVisible = false;
          this.resetForm();
        } else {
          console.log('表单验证失败!');
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
/* Additional styling for better appearance */
.container {
  max-width: 800px;
  margin: auto;
}

.el-table {
  margin-top: 20px;
}

.el-dialog {
  max-width: 400px;
}

.el-button {
  margin-right: 10px;
}
</style>
